<template>
  <div class="channel-edit">
    <van-cell :border="false">
      <h2
        slot="title"
        class="title"
      >我的频道</h2>
      <van-button
        class="edit-btn"
        round
        @click="isEdit.flag = !isEdit.flag"
      >{{ !isEdit.flag ? '编辑' : '完成'}}</van-button>
    </van-cell>
    <van-grid :gutter="10">
      <van-grid-item
        class="label-item"
        :class="{show:active === index}"
        v-for="(item,index) in channels"
        :key="item.id"
        @click="channelClick(item, index)"
      >
        <van-icon
          v-show="isEdit.flag && !fiexdChannels.includes(item.id)"
          slot="icon"
          name="close"
        />
        <span
          slot="text"
          class="label-text"
        >{{item.name}}</span>
      </van-grid-item>
    </van-grid>
    <van-cell :border="false">
      <h2
        slot="title"
        class="title"
      >频道推荐</h2>
    </van-cell>
    <van-grid :gutter="10">
      <van-grid-item
        class="label-item"
        v-for="item in allChannelsList"
        :key="item.id"
        @click="addChannel(item)"
      >
        <van-icon
          slot="icon"
          name="plus"
        />
        <span
          slot="text"
          class="label-text"
        >{{item.name}}</span>
      </van-grid-item>
    </van-grid>
  </div>
</template>

<script>
import { getAllChannelList, setChannelsList, deleteChannel } from '@/api/channel'
import { mapState } from 'vuex'
import { setItem } from '@/utils/storage'
export default {
  name: 'channelEdit',
  props: {
    channels: Array,
    active: Number,
    isEdit: Object
  },
  data () {
    return {
      allChannels: [],
      fiexdChannels: [0]
    }
  },
  methods: {
    async getAllChannels () {
      const { data } = await getAllChannelList()
      this.allChannels = data.data.channels
    },
    async addChannel (item) {
      this.channels.push(item)
      if (this.user) {
        try {
          await setChannelsList({
            id: item.id,
            seq: this.channels.length
          })
        } catch (err) {
          this.$toast.fail('请求失败，请稍后重试')
          this.channels.splice(this.channels.length - 1, 1)
          console.log(err)
        }
      }
    },
    // deleteFn (index) {
    //   this.channels.splice(index, 1)
    // },
    async channelClick (item, index) {
      // 编辑状态 删除频道数据
      if (this.isEdit.flag) {
        // 非固定频道才允许删除
        if (!this.fiexdChannels.includes(item.id)) {
          this.channels.splice(index, 1)

          // 如果删除索引小于激活状态频道，让active - 1
          if (index < this.active) {
            this.$emit('updateIndex', this.active - 1)
          }

          // 将删除的频道信息上传服务器
          if (this.user) {
            try {
              await deleteChannel(item.id)
            } catch (err) {
              this.$toast.fail('请求失败，请稍后重试')
              this.channels.splice(index, 0, this.allChannels.find(obj => obj.id === item.id))
            }
          }
        }
      } else {
        // 非编辑状态 切换频道
        this.$emit('updateIndex', index, false)
      }
    }
  },
  created () {
    this.getAllChannels()
  },
  computed: {
    allChannelsList () {
      return this.allChannels.filter(obj => {
        return !this.channels.find(item => {
          return item.id === obj.id
        })
      })
    },
    ...mapState(['user'])
  },
  watch: {
    // 监测频道列表更新，非登录状态下 缓存到本地
    channels () {
      if (!this.user) {
        setItem('CHANNELS', this.channels)
      }
    }
  }
}
</script>

<style scoped lang="less">
.channel-edit {
  padding: 75px 0 0;
  .title {
    margin: 0;
    font-size: 32px;
    font-weight: 400;
    color: #333;
  }
  .van-cell__value {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    .edit-btn {
      width: 104px;
      height: 48px;
      border: 1px solid #f85a5a;
      color: #f85a5a;
      font-size: 26px;
      white-space: nowrap;
    }
  }
  /deep/ .label-item {
    width: 160px;
    height: 86px;
    .van-grid-item__content {
      flex-direction: row !important;
      background-color: #f4f5f6;
      .van-icon-plus {
        font-size: 28px;
        margin-right: 5px;
      }
    }
    .van-grid-item__text,
    .label-text {
      font-size: 28px;
      color: #222;
      margin-top: 0;
      white-space: nowrap;
    }
  }
  /deep/ .van-grid-item__icon-wrapper {
    position: unset;
    .van-icon-close {
      position: absolute;
      right: 0;
      top: 0;
      transform: translate(50%, -50%);
      font-size: 30px;
      color: #cacaca;
      z-index: 2;
    }
  }
}
.show span {
  color: red !important;
}
</style>
